<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<title><g:layoutTitle default="Cloud Sharing" /></title>
<noscript>
	JavaScript is disabled! This page won't quite work.
</noscript>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, user-scalable=0">
<link rel="shortcut icon" href="${assetPath(src: 'icons/icon.png')}"
	type="image/x-icon">
<link rel="apple-touch-icon"
	href="${assetPath(src: 'icons/icon.png')}">
<link rel="apple-touch-icon" sizes="114x114"
	href="${assetPath(src: 'icons/icon.png')}">
<asset:stylesheet rel="stylesheet" href="css/main.css" />
<asset:javascript src="lib/jquery.js" />
<asset:javascript src="lib/bootstrap.min.js" />
<asset:javascript src="lib/bootstrapValidator.js" />
<asset:javascript src="lib/bootstrap-contextmenu.js"/>
<asset:javascript src="lib/spin.js"/>
<g:layoutHead />
</head>
<body>
	<div
		class="navbar navbar-inverse navbar-static-top navbar-fixed-top standar-background-color navbar-custom"
		role="navigation">
		<div class="">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target=".navbar-collapse">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<input id="usedCapacity" type="hidden" value="${session.usedCapacity}">
				<input id="availableCapacity" type="hidden" value="${session.availableCapacity}">
				<div class="icon-manage" style="width: 80%">
					<a href="/"><asset:image src="main/cloudsharing.png" /></a>
				</div>
			</div>
			<div class="collapse navbar-collapse" id="navbar-brand-centered">
				<div class="navbar-right navbar-right-custom">
					<div class="photopanel">
						<g:if test="${session.userPicture != null}">
							<img class="photo-profile" src="${session.userPicture}" />
						</g:if>
						<g:else>
							<asset:image class="photo-profile" src="main/profile.png" />
						</g:else>
					</div>
					<div class="inforpanel">
						<div class="btn-group">
							<button type="button" class="btn-link" data-toggle="dropdown"
								aria-expanded="false" style="color: white;">
								<b><i>${session.userName}</i></b>&nbsp;<span class="caret"></span>
							</button>
							<ul class="dropdown-menu dropdown-profile" role="menu">
								<li><a href="#">Edit Profile</a></li>
								<li><a href="#">Account Setting</a></li>
								<li class="divider"></li>
								<li><a href="/user/logOut">Sign out</a></li>
							</ul>
						</div>
						<p>${session.userEmail}</p>
						<div class="progress">
							<span id="capacitySlash" class="progress-value">&nbsp;&nbsp;&nbsp;&nbsp;${session.usedCapacityString}/${session.availableCapacityString}</span>
							<div id="capacityPercent" class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="70"
								aria-valuemin="0" aria-valuemax="100" style="width: ${(int)(session.usedCapacity * 100 / session.availableCapacity)}%">
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--/.nav-collapse -->
		</div>
	</div>
	<!--header-->
	<div class="divbody">
		<g:layoutBody />
	</div>
	<footer class="col-md-12 standar-background-color footer" id="footer">&copy;2015. Design by Graduation Thesis Team. All Rights Reserved.</footer>
	<asset:javascript src="js/manage.js" />
	<script type="text/javascript">
		$(document).ready(function() {
			var vp_h = $(window).height();
			var b_g = $(document).height();
			if (b_g <= vp_h) {
				$('#footer').removeClass('footer');
				$('#footer').addClass('footer-fixed');
				$('.divbody').css({
					'height' : '100vh'
				});
			}
		});
	</script>
</body>
</html>
